<template>
	<view>
		<!-- <view class="page"  :style="'background-image: url(' + $c.config.media + 'yuemini/reg_bg.png);'"> -->
	    <view class="page" :style="'background-image: url(' + $c.config.media + 'yuemini/reg_bg.png);'">		
		<view class="top" :style="`padding-top:`+$store.state.StatusBar.statusBar + `px`">
			<view v-if="isWXflag==true" style="height: 100rpx;"></view>	
			<view class="top-icon"   @click="back">
				<image class="img"
					:src="$c.config.imageIP + 'yuemini/ic_back.png'"
					mode="aspectFill"></image>
			</view>
			<view class="top-title" >{{title}}</view>
		</view>
		<view style="height: 100rpx;"></view>
		<view class="body" >
			<scroll-view scroll-y="true" class="scr" :style="{height:pageheigh-$store.state.StatusBar.statusBar-70+`px`}">
				<view>
					<view class="diamond">
						<image class="img" style="left: 20rpx;" mode="aspectFill" :src="$c.config.imageIP + 'yuemini/ic_diamond.png'"></image>
					</view>
					<view style="position: absolute; left:130rpx; top:10rpx; color:#fff;">{{info.diamonds}}</view>
					<view  style="position: absolute; left:130rpx; color:#666; top:50rpx; font-size:20rpx;  color:#fff;">钻石余额(个)</view>
					<view style="position: absolute; right:40rpx; top:20rpx;" class="button" @click="to('/pages/m-pages/m-exchangeLog/index')">兑换记录</view>
				</view>
				<view class="list">
					<view class="item" v-for="(item,index) in info.list">
						<view class="img">
							<image class="img" mode="aspectFill" :src="item.image"></image>
						</view>
						<view style="font-size:30rpx; line-height:60rpx;">{{item.diamondsStr}}</view>
						<view style="font-size:20rpx; line-height:60rpx;">{{item.descript}}</view>
						<view class="bottom">
							<text>{{item.goldCoinStr}}</text>
							<view class="button" @click="exchange(item)">兑换</view>
						</view>
					</view>
				</view>
				</scroll-view>
			</view>
			
		</view>
	
	</view>
</template>

<script>
	import {to} from '@/utils/index.js';
	export default {
		data() {
			return {
				$c: this.$c,
				isWXflag:false,
				pageheigh:0,
				title: '兑换商城',
				info: {}
			}
		},
		onLoad(option) {
			// #ifdef MP-WEIXIN
			 this.isWXflag =true;			
			// #endif
		},
		onShow(option){
			this.pageheigh = uni.getSystemInfoSync().windowHeight;
			
			uni.onWindowResize((res) => {
				this.pageheigh = res.size.windowHeight;
			});
			this.getInfo();
		},
		methods: {
			to,
			back(){
				to()
			},
			async getInfo(){
				let res = await this.$c.post("/app/exchange/getList")
				if(res.code == 0){
					this.info = res.data
				}
			},
			async exchange(item){
				let res = await this.$c.post("/app/exchange/exchange?id="+item.id)
				if(res.code != 0){
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					return;
				}
				uni.showToast({
					title: "兑换成功",
					icon: "none"
				})
				setTimeout(()=>{
					this.getInfo()
				},1000)
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		width: 100vw;
		padding:30rpx;
		height: 100vh;
		//background: linear-gradient(#e3ecfb, #fdedf0, #fff, #fff);
	}
	.top {
		position: fixed;
		top: 0rpx;
		width: 100%;
		// background-color: #e3ecfb;
		z-index: 999;
		text-align: center;
		vertical-align: middle;
		padding:10rpx;
	}
	.top-icon {
		position: absolute;
		left: 30rpx;
		z-index: 99;
		width: 30rpx;
		height: 30rpx;
	}
	.top-title {
		line-height: 50rpx;
		display: block;
		height:50rpx;
		z-index: 99;
		color:#fff;
	}

	.body{
		padding-top:80rpx;
		position: relative;
		.diamond{
			width:80rpx;
			height:80rpx;
		}
		.button{
			background-color: #aa8c72;
			color:#fff;
			display: inline-block;
			padding:15rpx 30rpx;
			border-radius: 30rpx;
			font-size:24rpx;
		}
		.list{
			margin-top:20rpx;
			.item{
				background-color: #e3ecfb;
				border-radius: 20rpx;
				width:40%;
				height:360rpx;
				float:left;
				margin-left:4%;
				margin-top:30rpx;
				position:relative;
				padding:15rpx;
				.img{
					width:180rpx;
					height:180rpx;
					margin:0 auto;
				}
				.bottom{
					position: absolute;
					bottom:0rpx;
					width:100%;
					text{
						float:left;
						color: #aa8c72;
						margin-right: 20rpx;
					}
					.button{
						float:right;
						padding: 5rpx 25rpx;
						margin-right: 30rpx;
						margin-bottom: 20rpx;
					}
				}
			}
		}
	}

</style>